import React, { Component } from "react";

// import { index_banner,category_list,category_subcate } from '../../api/index'
import { SearchBar } from "antd-mobile";
//集体导入并重命名
import * as service from "../../api/index";

import "../../styles/Index/Cate.scss";

class Cate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      list: [], //一级分类列表
      subcate: {}, //二三级分类
    };
  }

  componentDidMount() {
    //请求一级分类
    service.category_list().then((res) => {
      this.setState({
        list: res.data.list,
      });
      //请求第一个一级分类对应的二三级分类
      service.category_subcate({ id: res.data.list[0].id }).then((res) => {
        console.log(res.data.subcate);
        this.setState({
          subcate: res.data.subcate,
        });
      });
    });
  }
  onClickchange(i,id) {
    this.setState(
      {
        index: i,
      },
      () => {
        //接收点击的一级分类id, 请求对应的二三级分类
        service.category_subcate({ id }).then((res) => {
          this.setState({
            subcate: res.data.subcate,
          });
        });
      }
    );
  }
  toAllgood(id) {
    //跳路由到 所有商品页面, 并且要携带三级分类id
    this.props.history.push({ pathname: "/index/allgood", state: { id } });
  }
  render() {
    return (
      <div className="cate">
        <div className="header">分类</div>
        <div className="nav">
          <SearchBar placeholder="搜索店铺内商品" />
        </div>
        <div className="bigbox">
          {/* 一级分类 */}
          <div className="left">
            {this.state.list.map((item, i) => {
              return (
                <div
                  onClick={() => {
                    this.onClickchange(i,item.id);
                  }}
                  className={`btn ${
                    this.state.index === i ? "btn-s" : "btn"
                  }`}
                  key={i}
                >
                  <p>{item.name}</p>
                </div>
              );
            })}
          </div>

          {/* 二三级分类 */}
          <div className="right">
            {/* 二级分类列表 */}
            {this.state.subcate.subcategory &&
              this.state.subcate.subcategory.map((item2, index) => {
                return (
                  <div className="box" key={index}>
                    <h3 className="title">{item2.name}</h3>
                    {/* 三级分类列表 */}
                    <div className="list">
                      {item2.subNavs.map((item3, index) => {
                        return (
                          <div
                            className="cater"
                            key={index}
                            onClick={() => {
                              this.toAllgood(item3.id);
                            }}
                          >
                            <img src={item3.pic} alt="" />
                            <div className="name">{item3.name}</div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
          </div>
        </div>
      </div>
    );
  }
}

export default Cate;
